<script setup>
    import { getManagerVipList, edit, del, add } from "@/api/managervip"
    import { Search } from "@element-plus/icons-vue"
    import { ref, reactive, computed } from "vue"
    
    const region = ref('')
    const rentalType = ref('')
    const searchId = ref('')
    const rentalTypes = ref(['合租','整租'])
    const regions = ref([])

    const dataList = ref([])
   

    const page = ref(0)
    const currentPage = ref(1)

    const drawer = ref(false)

    const personList = ref({})

    
    getManagerVipList().then(res=>{
        dataList.value = res 
        for(let val of res){     
            if(regions.value.indexOf(val.region)==-1){
                regions.value.push(val.region)
            }
        }  
    })
    
    const computedTableData = computed(()=>{  
        return dataList.value.slice((currentPage.value - 1) * 10, (currentPage.value - 1) * 10 + 10)
        
    })

    function multiFilter(array, filters) {
        const filterKeys = Object.keys(filters)
        return array.filter((item) => {
            return filterKeys.every(key => {
                if(!filters[key].length) return true
                return !!~item[key].indexOf(filters[key])
            })
            })
    }

    function filterClick(){
        let obj = {
            rentalType: rentalType.value ||'',
            region: region.value ||'',
        }
        getManagerVipList().then(res=>{
            // console.log(res,"这里是res")
            dataList.value =  multiFilter(res, obj)
        }) 
    }

    

    function overView(row){
        drawer.value = true 
        personList.value = row 
    }

    function delClick(row){
        del(row).then(res=>{
            console.log(res);
            getManagerVipList({page: page.value}).then(res=>{
            dataList.value = res})
        })
    }

    const addDrawer = ref(false)

    let addInfoForm = reactive({
        name: '',
        sex: '',
        tel: '',
        rentalNum:'',
        adress:'',
        intoTime:'',
        leaseType:'',
        director:'',
        })

    function addFn(){
        addDrawer.value = true
    }

    function addInfo(){
        addInfoForm.id = Math.random()
        add(addInfoForm).then(res=>{
            getManagerVipList({page: page.value}).then(res=>{
            dataList.value = res})
        })
        cancel()
    }

    function cancel(){
        addInfoForm = reactive({
        name: '',
        sex: '',
        tel: '',
        rentalNum:'',
        adress:'',
        intoTime:'',
        leaseType:'',
        director:'',
        })
        addDrawer.value=false
    }
   
</script>

<template>
  <div >
        <div class="content-header">
            
            <div class="content-header-left">
                <span>片区名称</span>
                <el-select v-model="region" clearable placeholder="选择片区">
                    <el-option v-for="item in regions" :key="item" :label="item" :value="item" />
                </el-select>

                <span>租房类型</span>
                <el-select v-model="rentalType" clearable placeholder="选择租房类型">
                    <el-option v-for="item in rentalTypes" :key="item" :label="item" :value="item" />
                </el-select>

                <el-button type="primary" round @click="filterClick">筛选</el-button>
            </div>

            <div class="content-header-right">
                <el-input v-model="searchId" class="w-50 m-2" style="width:240px" placeholder="请输入需要查询的租房编号" :suffix-icon="Search" />

                <el-button type="primary" round @click="addFn" >添加</el-button>
            </div>

        </div>
      <el-table :data="computedTableData" style="width: 100% " height="700">
        <el-table-column  prop="name" label="姓名" />
        <el-table-column  prop="sex" label="性别"  />
        <el-table-column  prop="tel" label="电话"  />
        <el-table-column  prop="rentalNum" label="租房编号"/>
        <el-table-column  prop="adress" label="租房地址" />
        <el-table-column  prop="intoTime" label="入住时间" />
        <el-table-column  prop="leaseType" label="长租/短租"/>
        <el-table-column  prop="director" label="租房负责人" />

        <el-table-column prop="id" label="操作" > 
            <template #default="scope">
                <el-button type="primary" link @click="overView(scope.row)">查看</el-button>
                <el-button type="primary" link @click="delClick(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage" :total="dataList.length" />
 
    <div class="check-drawer">
        <el-drawer v-model="drawer" :show-close='false' size="40%">
            <template #header>
                非会员信息资料查看
            </template>

            <el-descriptions title="非会员信息资料查看" :column="1">

                <el-descriptions-item label="姓名"> {{personList.name}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{personList.sex}}</el-descriptions-item>
                <el-descriptions-item label="电话">{{personList.tel}}</el-descriptions-item>
                <el-descriptions-item label="租房编号">{{personList.rentalNum}}</el-descriptions-item>
                <el-descriptions-item label="租房地址">{{personList.adress}}</el-descriptions-item>
                <el-descriptions-item label="入住时间">{{personList.intoTime}}</el-descriptions-item>
                <el-descriptions-item label="长租/短租">{{personList.rentalType}}</el-descriptions-item>
                <el-descriptions-item label="租房负责人">{{personList.director}}</el-descriptions-item>

            </el-descriptions>
            
            <template #footer>
                <el-button type="primary"  @click="drawer=false">返回</el-button>
            </template>
        </el-drawer>
    </div>

    <div class="add-drawer">
        <el-drawer v-model="addDrawer" :show-close='false' size="40%">
            <template #header>
                新增非会员信息
            </template>
            
            <el-form :model="addInfoForm" status-icon label-width="120px" class="demo-ruleForm" >   <!-- :rules="rules"  -->
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="addInfoForm.name" type="text" autocomplete="off" />
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                <el-input v-model="addInfoForm.sex"  autocomplete="off" />
                </el-form-item>

                <el-form-item label="电话" prop="tel">
                    <el-input v-model.number="addInfoForm.tel" />
                </el-form-item>

                <el-form-item label="租房编号" prop="rentalNum">
                    <el-input v-model="addInfoForm.rentalNum" />
                </el-form-item>

                <el-form-item label="地址" prop="adress">
                    <el-input v-model="addInfoForm.adress" />
                </el-form-item>

                <el-form-item label="入住时间" prop="intoTime">
                    <el-date-picker v-model="addInfoForm.intoTime" type="date" placeholder="选择日期" :default-value="new Date()" value-format="YYYY-MM-DD"/>

                </el-form-item>

                <el-form-item label="长租/短租" prop="leaseType">
                    <el-select v-model="addInfoForm.leaseType" class="m-2" placeholder="请选择" size="large">
                        <el-option label="长租" value="长租"></el-option>
                        <el-option label="短租" value="短租"></el-option>
                    </el-select>

                </el-form-item>

                <el-form-item label="租房负责人" prop="director">
                    <el-input v-model="addInfoForm.director" />
                </el-form-item>
                

                <el-form-item>
                    <el-button type="primary" @click="cancel">取消</el-button>
                    <el-button type="warning" @click="addInfo">保存</el-button>
                </el-form-item>

            </el-form>

            <template #footer>
                <el-button type="primary"  @click="addDrawer=false">返回</el-button>
            </template>
        </el-drawer>
    </div>
  </div>

</template>

<style lang="scss" scoped>
    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
    }
    .content-header .content-header-left{
        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 50%;
    }
    .content-header .content-header-right{
        flex: 1;
        display: flex;
        justify-content: end;
        align-items: center;
    }
    .content-header .content-header-right .el-input {
        margin-right: 10px;
    }

</style>
